<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-11 09:05:40
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-11 17:50:04
 * @FilePath: \ekee-web\src\components\pagination.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pagination">
    <div class="total">共 {{ totalList }} 条</div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalList"
      :pager-count="6"
      background
      layout="prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { defineEmits } from "vue";

const props = defineProps({
  totalList: {
    type: Number,
    default: 0,
  },
  page: {
    type: Number,
    default: 0,
  },
});

const count = ref(0);

const pageSize = ref(10);
const currentPage = ref(1); //默认页面
// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(["handleCurrentChange"]);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
// 翻页 当前页数
const handleCurrentChange = (val) => {
  // let param = {
  //   currenPpage: val,
  // };
  console.log("val11", val);
  currentPage.value = val;
  emit("handleCurrentChange", currentPage.value);
};
</script>

<style lang="less" scoped>
.pagination {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 62px;
  padding: 0 16px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border-top: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
}

.total {
  height: 22px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #606266;
  line-height: 22px;
}
.read-the-docs {
  color: #888;
}
</style>
